import React from "react";
import TheTable from "@/components/TheTable";
import TheButton from "@/components/TheButton";
import ThePagination from "@/components/ThePagination";
import TheQueryForm from "@/components/TheQueryForm";
import TheTableExtend from "@/components/TheTableExtend";
import { exportSheetTable } from '@/utils/exportTable'
import store from "@/store/store"
import _ from "lodash";
import { getDateTime3 } from '@/utils/getDate'
import { imWalletRechargeOrderInfoPage, imWalletRechargeOrderInfoExport } from '@/request/wallet/rechargeRecord';
import Json2Excel from '@/utils/Json2Excel'

class RechargeRecord extends React.Component {
  constructor(props) {
    super(props);
    this.queryFormRef = React.createRef();

    this.state = {
      exportLoading: false,
      columns: [
        {
          title: "充值单号",
          dataIndex: "walletOrderCode",
          key: "walletOrderCode",
        },
        {
          title: "充值流水",
          dataIndex: "tradeNo",
          key: "tradeNo",
        },
        {
          title: "会员ID",
          dataIndex: "memberId",
          key: "memberId",
        },
        {
          title: "用户昵称",
          dataIndex: "memberName",
          key: "memberName",
        },
        {
          title: "会员手机号",
          dataIndex: "memberPhone",
          key: "memberPhone",
          render: (text) => {
            var reg = /^(\d{3})\d{4}(\d{4})$/;
            var memberMobile =  text.toString().replace(reg, '$1****$2');
            return memberMobile;
          }
        },
        {
          title: "充值金额",
          dataIndex: "orderPayPrice",
          key: "orderPayPrice",
          render: (text) => {
            return <React.$price price={text || 0} />
          }
        },
        {
          title: "充值时间",
          dataIndex: "createTime",
          key: "createTime",
        },
        {
          title: "充值状态",
          dataIndex: "orderState",
          key: "orderState",
          render: (text) => {
            let label = ''
            switch (text) {
              case '0':
                label = '充值失败'
                break
              case '1':
                label = '待支付'
                break
              case '2':
                label = '充值成功'
                break
              case '3':
                label = '退款'
                break
              case '4':
                label = '退款失败'
                break
            }
            return label
          }
        },
        {
          title: "备注",
          dataIndex: "orderRemark",
          key: "orderRemark",
        }
      ],
      dataSource: [],
      pageData: {
        pageNo: 1,
        pageSize: 10,
      },
      total: 0,
      searchValue: {},
      newColumns: [],
      form_show: true,
      searchOption: [
        { field: 'memberInfoStr', label: '会员信息', placeholder: '会员ID/昵称/会员手机号', required: false, rules: [], type: 'Input', defaultValue: '', },
        { field: 'walletOrderCodeLike', label: '充值单号', placeholder: '输入充值单号', required: false, rules: [], type: 'Input', defaultValue: '', },
        { field: 'tradeNo', label: '充值流水', placeholder: '输入充值流水', required: false, rules: [], type: 'Input', defaultValue: '', },
        { field: "orderState", label: "充值状态", placeholder: "全部", type: "Select", options: [{ value: '0', label: '充值失败' }, { value: '1', label: '待支付' }, { value: '2', label: '充值成功' }, { value: '3', label: '退款' }, { value: '4', label: '退款失败' }] },
        { field: 'time', label: '充值时间', placeholder: '请选择', required: false, rules: [], type: 'RangePicker' },
      ],
      queryForm: {},
    };
  }
  async componentDidMount() {
    this.onColumnsFilter(this.state.columns);
    this.getData();
  }
  getData = async (values) => {
    if (values && !_.isEmpty(values.time)) {
      values.createTimeStart = getDateTime3(values.time[0]) + ' 00:00:00'
      values.createTimeEnd = getDateTime3(values.time[1]) + ' 23:59:59'
      delete (values.time)
    }
    this.setState(
      {
        queryForm: values === undefined ? this.state.queryForm : { ...values },
      },
      async () => {
        const params = { ...this.state.queryForm, ...this.state.pageData, }
        store.dispatch({
          type: 'SaveSearchValues',
          data: { pathName: 'rechargeRecord', ...params }
        })
        console.log(params);
        let res = await imWalletRechargeOrderInfoPage({ ...params })
        if (res.code === 0) {
          this.setState({
            dataSource: res.data,
            pageData: {
              pageNo: res.pageNo,
              pageSize: res.pageSize
            },
            total: res.totalCount
          })
        }
      });
  };
  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: { pageNo, pageSize, },
    }, () => {
      this.getData();
    }
    );
  };
  //表格导出
  toExportTable = async () => {
    this.setState({ exportLoading: true });
    let res = await imWalletRechargeOrderInfoExport({
      ...this.state.queryForm
    })
    if (res.code === 0) {

      let tB_data = res.data.map((item, index) => {
        let txt = ''
        switch (item.orderState) {
          case '0':
            txt = '充值失败'
            break
          case '1':
            txt = '待支付'
            break
          case '2':
            txt = '充值成功'
            break
          case '3':
            txt = '退款'
            break
          case '4':
            txt = '退款失败'
            break
        }
        const reg = /^(\d{3})\d{4}(\d{4})$/;
        const memberMobile = item.memberPhone.toString().replace(reg, '$1****$2');
        return {
          index: index + 1,
          walletOrderCode: item.walletOrderCode,
          tradeNo: item.tradeNo,
          memberId: item.memberId,
          memberName: item.memberName,
          memberPhone: memberMobile,
          orderPayPrice: (Number(item.orderPayPrice) / 100).toFixed(
            2
          ),
          createTime: item.createTime,
          orderState: txt,
          goodsKeyValue: item.goodsKeyValue,
          orderRemark: item.orderRemark,
        };
      });
      const option = {
        header: [
          { prop: "index", title: "序号" },
          { prop: "walletOrderCode", title: "充值单号" },
          { prop: "tradeNo", title: "充值流水" },
          { prop: "memberId", title: "会员ID" },
          { prop: "memberName", title: "用户昵称" },
          { prop: "memberPhone", title: "会员手机号" },
          { prop: "orderPayPrice", title: "充值金额", valueType: 'n' },
          { prop: "createTime", title: "充值时间" },
          { prop: "orderState", title: "充值状态" },
          { prop: "orderRemark", title: "备注" },

        ],
        dataSource: tB_data,
        fileName: '充值列表'
      }
      this.setState({ exportLoading: false });

      Json2Excel(option)


    } else {
      React.$message({
        type: "warning",
        content: "导出操作失败,请重试",
      });
      this.setState({ exportLoading: false });
    }
  }
  onReset = () => {
    this.setState({ queryForm: {}, },
      () => {
        this.getData();
      }
    );
  }
  onColumnsFilter = (value) => {
    this.setState({
      newColumns: value,
    });
  }
  onFormSearch = (values) => {
    this.setState(
      {
        pageData: { pageNo: 1, pageSize: 10 },
      },
      () => {
        this.getData(values);
      }
    );
  }
  render() {
    const {
      columns,
      dataSource,
      total,
      exportLoading,
      form_show,
      searchOption,
      newColumns,
      pageData,
    } = this.state;
    return (
      <div className={"p-layout-box commodity-content"}>
        <TheQueryForm
          ref={(ref) => (this.queryFormRef = ref)}
          show={form_show}
          option={searchOption}
          onReset={() => this.onReset()}
          onGetValues={(values) => this.onFormSearch(values)}
        ></TheQueryForm>
        <TheTableExtend
          columns={columns}
          onFormTrigger={() =>
            this.setState({ form_show: !this.state.form_show })
          }
          onTableRefresh={() => this.getData()}
          onColumnsFilter={(value) => this.onColumnsFilter(value)}
        >
          <TheButton
            size="middle"
            type="default"
            haspermi={["wallet:rechargeRecord:exportList"]}
            onClick={() => this.toExportTable()}
            loading={exportLoading}
          >
            导出
          </TheButton>
        </TheTableExtend>

        <TheTable

          columns={newColumns}
          dataSource={dataSource}
        />
        <ThePagination
          pageNo={pageData.pageNo}
          pageSize={pageData.pageSize}
          total={total}
          pageChange={this.pageChange}
        />

      </div>
    );
  }
}

export default RechargeRecord;
